<script setup>
import axios from "../ajax/axios";
import { ElMessage } from "element-plus";
//引入生命周期函数
import { onMounted, ref } from "vue";
//定义分页对象
let page = ref({
  pageNum: 1,
  pageSize: 5,
  total: 0,
  list: [],
});
//定义对话框是否提示
let dialogVisible = ref(false);
//定义用户提交的表单的对象
let user = ref({
  id: "",
  name: "",
  age: "",
  sex: "",
});

//获取用户的列表信息
let getUserList = async () => {
  let params = { params: { pageNum : page.value.pageNum , pageSize : page.value.pageSize }  };

  console.info(params)
  let pageInfo = await axios.get("/user/getUserPageList", params);
  (page.value.pageNum = pageInfo.pageNum),
    (page.value.pageSize = pageInfo.pageSize),
    (page.value.total = pageInfo.total),
    (page.value.list = pageInfo.list);
};
//回调函数
onMounted(() => {
  getUserList();
});
//添加页数变化的函数
let handleCurrentChange = (pageNum) => {
  //当页数发生变化时 调用axios函数重新查询数据库
  page.value.pageNum = pageNum;
  getUserList();
};
//当条数发生改变时
let handleSizeChange = (pageSize) => {
  //当页数发生变化时 调用axios函数重新查询数据库
  page.value.pageSize = pageSize;
  getUserList();
};
//新增操作
let updateUser = async () => {
  //如果有ID时修改 没有就是新增
  if (user.value.id) {
    await axios.put("/user/updateUser", user.value);
    //修改成功提示
    ElMessage.success("用户修改成功");
  } else {
    await axios.post("/user/insertUser", user.value);
    //修改成功提示
    ElMessage.success("用户新增成功");
  }
  //关闭对话框
  dialogVisible.value = false;
  //重新刷新列表信息
  getUserList();
  //清空原有数据
  user.value.id = "";
  user.value.name = "";
  user.value.age = "";
  user.value.sex = "";
};
let toUpdateUser = async (row) => {
  dialogVisible.value = true;
  let userId = row.id;
  let userData = await axios.get(`/user/findUserById/${userId}`)
  user.value = userData
};
let cancel = () => {
  dialogVisible.value = false;
  user.value.id = "";
  user.value.name = "";
  user.value.age = "";
  user.value.sex = "";
};
let deleteUser = async (row) => {
  await axios.delete("/user/deleteUserById?id=" + row.id);
  ElMessage.success("用户删除成功");
  getUserList();
};
</script>

<template>
  <div>
    <el-container>
      <el-header>
        <h1>用户案例练习</h1>
      </el-header>
      <el-main>
        <!-- 绘制表格 :data="数据的来源"-->
        <el-table :data="page.list" style="width: 100%" stripe border>
          <el-table-column prop="id" label="ID" align="center" />
          <el-table-column prop="name" label="姓名" align="center" />
          <el-table-column prop="age" label="年龄" align="center" />
          <el-table-column prop="sex" label="性别" align="center" />
          <el-table-column label="操作" align="center">
            <!-- 作用域插槽 个uanlidangqianhang管理当前行数据 -->
            <template #default="scope">
              <el-button type="success" @click="toUpdateUser(scope.row)"
                >修改</el-button
              >
              <!-- 气泡删除 -->
              <el-popconfirm
                title="你确定删除吗?"
                @confirm="deleteUser(scope.row)"
              >
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 单独配置分页功能 -->
        <div style="display: flex">
          <el-pagination
            background
            layout=" total, prev, pager, next,sizes"
            :total="page.total"
            :page-size="page.pageSize"
            :current-page="page.pageNum"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 20, 30]"
            @size-change="handleSizeChange"
          />
          <el-button
            type="primary"
            @click="dialogVisible = true"
            style="margin-top: 25px; margin-left: 25px"
            >新增</el-button
          >
        </div>
      </el-main>
      <!-- 新增和修改的对话框 -->
      <el-dialog v-model="dialogVisible" title="用户新增和修改" width="500">
        <!-- 添加用户的表单数据 -->
        <el-form :model="user" label-width="auto" style="max-width: 450px">
          <el-form-item label="Id号">
            <el-input v-model="user.id" disabled />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="user.name" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="user.age" />
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="user.sex" />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="updateUser">提交</el-button>
          </div>
        </template>
      </el-dialog>
    </el-container>
  </div>
</template>

<style scoped>
.el-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-main .el-pagination {
  margin-top: 25px;
}
</style>
